<template>
<div id="index" ref="appRef">
    <div class="bg">
        <dv-loading v-if="loading">Loading...</dv-loading>
        <div v-else class="host-body">
            <!-- 标题 -->
            <Title title="XXXX标题"></Title>
            <div class="body-box">
                <!-- 内容 -->
                <div class="content-box">
                    <div class="content-box-left">
                        <div class="content-box-left-top">
                            <BorderBox title="AAA">
                                <template #extend>
                                    <span class="dayliy time-choose">当日</span>
                                </template>
                            </BorderBox>
                        </div>
                        <div class="content-box-left-center">
                            <BorderBox title="BBB">
                                BBB
                            </BorderBox>
                        </div>
                        <div class="content-box-left-bottom">
                            <BorderBox title="CCC">
                                CCC
                            </BorderBox>
                        </div>
                    </div>
                    <div class="content-box-right">
                        <div class="content-box-right-top">
                            <BorderBox title="DDD">
                                DDD
                            </BorderBox>
                        </div>
                        <div class="content-box-right-center">
                            <BorderBox title="EEE">
                                EEE
                            </BorderBox>
                        </div>
                        <div class="content-box-right-bottom">
                            <BorderBox title="FFF">
                                FFF
                            </BorderBox>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
</template>

<script>
import drawMixin from "../../utils/drawMixin";

import BorderBox from "@/components/decorate/border-box.vue"
import Title from "@/components/decorate/title.vue"

export default {
    mixins: [drawMixin],
    data() {
        return {
            loading: true,
        };
    },
    components: {
        BorderBox,
        Title
    },
    mounted() {
        this.cancelLoading();
    },
    beforeDestroy() {
        clearInterval(this.timing);
    },
    methods: {
        cancelLoading() {
            setTimeout(() => {
                this.loading = false;
            }, 500);
        },
    },
};
</script>

<style lang="scss" scoped>
@import "../../assets/scss/index.scss";
</style><style lang="scss" scoped>
#index {
    .bg {
        // background-image: url('../../assets/bg_car_mange3.png');// 背景图
    }

    .body-box {
        display: flex;
        flex-direction: column;

        //下方区域的布局
        .content-box {
            width: 100%;
            height: 1000px;
            display: flex;
            justify-content: space-between;

            div {
                width: 425px;
            }

            .content-box-left {
                width: 425px;

                .content-box-left-top {
                    height: 360px;
                }

                .content-box-left-center {
                    height: 280px;
                }

                .content-box-left-bottom {
                    height: 340px;
                }

            }
        }

        .content-box-center {
            width: 100% !important;
            height: 150px;
        }

        .content-box-right {
            .content-box-right-top {
                width: 100%;
                height: 360px;
            }

            .content-box-right-center {
                height: 330px;
            }

            .content-box-right-bottom {
                height: 290px;
                width: 100%;
            }
        }
    }
}

</style>
